<template>
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" append-to-body v-dialogDrag width="80%">
    <div class="app-container">
      <el-tabs class="detail-tab" type="card" v-model="activeName">
        <el-tab-pane label="发票信息" name="first">
          <el-row :gutter="20">
            <el-table :data="dataList" @selection-change="handleSelectionChange" v-loading="loading">
              <el-table-column align="center" label="发票代码" prop="preNo"/>
              <el-table-column align="center" label="发票编号" prop="taxNo"/>
              <el-table-column align="center" label="开票金额" prop="invoiceMoney"/>
              <el-table-column align="center" label="已核销金额" prop="backMoney"/>
              <el-table-column align="center" label="未核销金额" prop="remainMoney"/>
              <el-table-column align="center" label="开票日期" prop="invoiceDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.invoiceDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="发票核销状态" prop="status">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.fund_callback" :value="scope.row.status"/>
                </template>
              </el-table-column>
              <el-table-column align="center" label="备注信息" prop="infomation" show-overflow-tooltip/>
              <el-table-column align="center" label="项目名称" prop="projectName"/>
              <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
                <template slot-scope="scope">
                  <el-button @click="hexiao(scope.row)" icon="el-icon-check" size="mini" slot="reference" type="text"
                             v-if="scope.row.status != '1'">核销
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
                        @pagination="handleQuery" v-show="total>0"/>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-tabs class="detail-tab" type="card" v-model="activeName">
        <el-tab-pane label="回款信息" name="first">
          <el-row :gutter="20">
            <el-table :data="dataList2" @selection-change="handleSelectionChange" v-loading="loading2">
              <el-table-column align="center" label="回款类型" prop="type">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.prj_fund_back_type" :value="scope.row.type"/>
                </template>
              </el-table-column>
              <el-table-column align="center" label="回款金额" prop="backMoney"/>
              <el-table-column align="center" label="回款日期" prop="backDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.backDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="备注信息" prop="infomation" show-overflow-tooltip/>
              <el-table-column align="center" label="项目名称" prop="projectName"/>
              <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
                <template slot-scope="scope">
                  <el-popconfirm :title="`确认删除该数据项？`" @confirm="handleDeleteFundBack(scope.row)"
                                 style="margin-left: 10px;">
                    <el-button icon="el-icon-delete" size="mini" slot="reference" type="text"
                               v-hasPermi="['develop:ProjectFundBack:remove']">删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <pagination :limit.sync="queryParams2.pageSize" :page.sync="queryParams2.pageNum" :total="total2"
                        @pagination="handleQuery" v-show="total2>0"/>
          </el-row>
        </el-tab-pane>
      </el-tabs>

      <invoice-info-form-for-back @ok="handleQuery" ref="InvoiceInfoFormForBack"></invoice-info-form-for-back>
      <!--    <projectInvoiceInfo-form @ok="getList" ref="form"></projectInvoiceInfo-form>-->
    </div>

    <div class="dialog-footer" slot="footer">
      <!--        <el-button @click="submitForm" type="primary">确 定</el-button>-->
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {deleteAction, getAction} from '@/api/manage'
    import InvoiceInfoFormForBack from "./InvoiceInfoFormForBack";
    // import ProjectInvoiceInfoForm from '@/views/develop/projectInvoiceInfo/module/ProjectInvoiceInfoForm'

    export default {
        name: "InvoiceInfoListDialog",
        dicts: ['fund_callback', 'prj_fund_back_type'],
        components: {
            InvoiceInfoFormForBack,
        },
        /*props: {
            projectId: {
                type: String,
                required: true,
                default: ''
            },
            projectName: {
                type: String,
                required: true,
                default: ''
            }
        },*/
        data() {
            return {
                activeName: "first",
                open: false,
                title: "发票核销",
                // 遮罩层
                loading: true,
                loading2: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                total2: 0,
                // 项目开票信息管理表格数据
                dataList: [],
                dataList2: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 20,
                    invoiceMoney: null,
                    invoiceDate: null,
                    infomation: null,
                    projectId: null,
                    projectName: null,
                    orderByColumn: "create_time",
                    isAsc: "asc"

                },
                queryParams2: {
                    pageNum: 1,
                    pageSize: 20,
                    invoiceMoney: null,
                    invoiceDate: null,
                    infomation: null,
                    projectId: null,
                    projectName: null
                },
                url: {
                    list: '/projectInvoiceInfo/projectInvoiceInfo/list',
                    remove: '/projectInvoiceInfo/projectInvoiceInfo/',
                    export: '/projectInvoiceInfo/projectInvoiceInfo/export',
                },
            };
        },
        /*watch: {
            'projectId': {
                handler(newVal, oldVal) {
                    // console.log("33333333", newVal, oldVal)
                    this.queryParams.projectId = newVal;
                    this.getList();
                },
                deep: true,
                immediate: true
            }
        },*/
        created() {
            // this.queryParams.projectId = this.projectId;
            // this.getList();
        },
        methods: {
            cancel() {
                this.open = false;
                // this.reset();
            },
            handleDeleteFundBack(row) {
                const ids = row.id || this.ids;
                deleteAction("/projectFundBack/projectFundBack/", ids).then(response => {
                    this.handleQuery();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                });
            },
            //打开列表页面(本页面)
            showAllInvoices(row) {
                let that = this;
                that.open = true;
                that.queryParams.projectId = row.id;
                that.queryParams2.projectId = row.id;
                that.handleQuery();
            },
            hexiao(row) {//核销发票
                let that = this;
                that.$refs.InvoiceInfoFormForBack.show(row);
            },
            /** 新增按钮操作 */
            handleAdd() {
                let data = {"projectId": this.projectId, "projectName": this.projectName};
                this.$refs.form.handleAddNew(data);
            },
            /** 查询项目开票信息管理列表 */
            getList() {
                this.loading = true;
                getAction(this.url.list, this.queryParams).then(response => {
                    this.dataList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            getList2() {
                this.loading = true;
                getAction("/projectFundBack/projectFundBack/list", this.queryParams2).then(response => {
                    this.dataList2 = response.rows;
                    this.total2 = response.total;
                    this.loading2 = false;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
                this.getList2();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.$refs.form.handleUpdate(row);
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                deleteAction(this.url.remove, ids).then(response => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                });
            },
            /** 导出按钮操作 */
            handleExport() {
                this.download(this.url.export, {
                    ...this.queryParams
                }, `projectInvoiceInfo_${new Date().getTime()}.xlsx`)
            },
        }
    };
</script>
